<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">点击</button>
    <button class="btn2">解除绑定</button>
    <script>
        // dom几级事件 ，是事件的标准 （版本）
        // 0级  1级 2级 3级事件 
        //一、 1、 0级事件绑定 
        // var btn1 = document.querySelector(".btn1");
        // btn1.onclick = function(){  // 给btn1绑定 点击事件
        //     console.log(1111);
        // }

        // //2、0级事件解绑 ；需要给事件重新赋值 就可以了。
        // var btn2 = document.querySelector(".btn2");
        // btn2.onclick = function(){
        //     console.log("0级事件解除绑定");
        //     // console.log(1111);
        //     btn1.onclick = null;  // 解除btn1的绑定事件
        // }



        // 二、dom2级事件的绑定 
        // 1.绑定事件
        // 元素.addEventListener("事件名",事件函数);
        var fn = function(){  // 事件函数 ，回调函数callback  ,cb
            console.log("点击了");
        }

        var btn1 = document.querySelector(".btn1");
        btn1.addEventListener("click",fn)

        // 2.解除绑定事件
        var btn2 = document.querySelector(".btn2");
        btn2.onclick = function(){
            console.log("解除绑定");
            btn1.removeEventListener("click",fn)
        }

        // var obj1  ={name:"张三"};
        // var obj2 = {name:"张三"};





    </script>
</body>
</html>